<template>
    <div id="record" :style="{height:height+'px'}">
        <cube-scroll ref="scroll" :options="scroll_options" @pulling-up="upLoad">

            <div id="list">
                <dl v-if="user_record">
                    <dt><img :src="user_record.header" /></dt>
                    <dd>{{user_record.nickname}}</dd>
                    <dd>￥{{user_record.money}}</dd>
                    <dd>{{user_record.time}}</dd>
                </dl>
                <template v-if="list.data.length > 0">
                    <dl v-for="item in list.data" :key="item.id">
                        <dt><img :src="item.header" @load="imgLoad" /></dt>
                        <dd>{{item.nickname}}</dd>
                        <dd>￥{{item.money}}</dd>
                        <dd>{{item.time}}</dd>
                    </dl>
                </template>
                <empty v-if="list.data.length <= 0 && !user_record">暂无记录</empty>
            </div>

        </cube-scroll>
    </div>
</template>

<script>
    import empty from '../../../components/empty/Empty';
    export default {
        name: "record",
        data(){
            return {
                height:0,
                red_id:0,  //红包id
                user_record:null,  //当前用户红包记录
                user_record_same:false,  //列表寻转是否找到当前用户的记录id,如果找到删除设置为true
                list:{
                    data:[],
                    limit:[0,15]
                },
                scroll_options:{
                    scrollbar:true,
                    pullUpLoad:{
                        txt:{
                            more:'上拉加载更多',
                            noMore:'----我也是有底线的----'
                        }
                    }
                },
                loading:false  //数据列表加载中
            }
        },
        components:{
          empty
        },
        created() {
            let {red_id} = this.$route.params;
            this.red_id = red_id;
            this.height = document.documentElement.clientHeight;
        },
        mounted(){
            this.getUserRecord()
                .then(()=>{
                    this.getList();
                });
        },
        methods:{
            /**
             * 获取当前用户记录
             */
            getUserRecord(){
                return new Promise((success)=>{
                    this.$url('redRecord/getUserRecord',{
                        red_id:this.red_id
                    })
                        .then((res)=>{
                            if(res.data.status === 'success'){
                                this.user_record = res.data.data;
                            }
                            success();
                        });
                });
            },
            /**
             * 上拉加载
             */
            upLoad(){
                this.getList();
            },
            /**
             * 获取列表
             */
            getList(){
                if(this.loading) return true;
                this.loading = true
                this.$url('redRecord/getList',{
                    red_id:this.red_id,
                    limit:this.list.limit
                })
                    .then((res)=>{
                        this.loading = false;
                        if(res.data.status == 'success'){
                            this.list.limit[0] += this.list.limit[1];
                            let data = res.data.data;
                            if(this.user_record && !this.user_record_same){
                                for(let i=0;i<data.length;i++){
                                    if(data[i].id == this.user_record.id){
                                        data.splice(i,1);
                                        this.user_record_same = true;
                                        break;
                                    }
                                }
                            }
                            this.list.data.push(...data);
                            this.$refs.scroll.forceUpdate(true,true);
                        }else{
                            if(this.list.limit[0] == 0){
                                this.scroll_options.pullUpLoad = false;
                            }else{
                                this.$refs.scroll.forceUpdate(false,false);
                            }
                        }
                    });
            },
            /**
             * 图片load
             */
            imgLoad(){
                this.$refs.scroll.refresh();
            }
        }
    }
</script>

<style scoped lang="less" src="./record.less"></style>
